﻿<!DOCTYPE html>
<html>
<head>
    <title>汇总报表：实现汇总报表向明细报表的透视(Drilldown) - WEB HTML5报表演示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="../grhtml5-6.6-min.js" type="text/javascript"></script>

    <script type="text/javascript">
        var reportViewer;

        //在网页初始加载时启动报表的运行显示
        function window_onload() {
            var BeginDate = '1997-1-1',
                EndDate = '1997-12-31',
                dataURL = encodeURI("../../data/DataCenter.jsp?data=FilterChartBar&BeginDate=" + BeginDate + "&EndDate=" + EndDate);
                
            reportViewer = window.rubylong.grhtml5.insertReportViewer("report_holder", "../../grf/SummaryToDetail/ChartBar.grf", "");

            reportViewer.report.OnInitialize = OnInitialize;

            //reportViewer.stop(); //首先要停止报表运行
            reportViewer.dataURL = dataURL; //重置报表的数据URL
            reportViewer.start(); //重新启动生成报表
        }

        function OnInitialize() {
            var chart = reportViewer.report.ControlByName("Chart1");
        
            chart.ondblclickGraph = ondblclickChartGraph;   //挂接图表中图形元素双击事件，单击事件对应的属性为 onclickGraph
            chart.ondblclickLegend = ondblclickChartLegend; //挂接图表中图例元素双击事件，单击事件对应的属性为 onclickLegend
        }
        
        function ondblclickChartGraph(evt, chart, series, group) {
            drillToDetail(chart, series, group);
        }
        
        function ondblclickChartLegend(evt, chart, series, group) {
            drillToDetail(chart, series, group);
        }

        function drillToDetail(chart, series, group) {
            var recordset = chart.Recordset,
                nameField = recordset.Fields.Item("CategoryName"),
                idField = recordset.Fields.Item("CategoryID"),
                city,
                name,
                CategoryID,
                BeginDate = '1997-1-1',
                EndDate = '1997-12-31',
                URL = "Detail.jsp?BeginDate=" + BeginDate + "&EndDate=" + EndDate; //+ "&CategoryID=" + CategoryID;

            //如果参数series小于0，代表是对应全部序列
            if (series >= 0) {
                name = chart.SeriesLabel(series);
                
                //根据名称，在图表记录集中找出对应的ID
                recordset.First();
                while (!recordset.Eof()) {
                    if (name === nameField.AsString) {
                        CategoryID = idField.AsInteger;
                        break;
                    }
                    recordset.Next();
                }
                
                URL += "&CategoryID=" + CategoryID;
            }
            
            //如果参数group小于0，代表是对应全部组簇
            if (group >= 0) {
                city = chart.GroupLabel(group);
                URL += "&City=" + city;
            }

            window.open(URL, "_blank"); //根据URL打开明细报表
        }
    </script>
</head>
<body style="" onload="window_onload()">
    <div id="report_holder">
        报表占位标签
    </div>
</body>
</html>
